<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div class="layui-container" style="margin: 15px;padding: 15px;background-color: #fff;">
        <h2>用户: {$user['phone'] ?? '您还未登录'}</h2>
        <hr>
        <div class="layui-form">
            <input type="hidden" name="out_no" value="{$item['out_no']}">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="sku_title" value="{$item['sku_title']}" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" value="{$item['price']}" readonly class="layui-input">
                </div>
            </div>
            {foreach $property_names as $name_id => $property_name}
            <div class="layui-form-item sku-properties">
                <label class="layui-form-label">选择{$property_name['title']}</label>
                <div class="layui-input-block">
                    {foreach $property_name['property_values'] as $value_id => $property_value}
                    <button
                        class="layui-btn{if $name_value[$name_id] == $value_id} layui-btn-danger{else /} layui-btn-primary{/if}{if !in_array($name_id, $name_ids) || !in_array($value_id, $value_ids[$name_id])} layui-btn-disabled{/if}"
                        {if in_array($name_id, $name_ids) && in_array($value_id, $value_ids[$name_id])}
                        onclick="getSku(this)" data-name-id="{$name_id}" data-value-id="{$value_id}"
                        {/if}>{$property_value['title']}</button>
                    {/foreach}
                </div>
            </div>
            {/foreach}
            <div class="layui-inline">
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="number" name="buycount" max="{$item['stock']}" min="0" value="1"
                            class="layui-input">
                    </div>

                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-danger {if $item['status']} layui-btn-disabled{/if} add_cart"
                            onclick="add_cart()" {if $item['status']} disabled{/if}>加入购物车</button>
                    </div>
                    {if $user}
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal" onclick="dobuy()">结算</button>
                    </div>
                    {/if}

                </div>
            </div>
        </div>
        <hr />
        <!-- 内容详情 -->
        <div class="layui-row">
            <div class="layui-col-sm12">
                <h1 class="sku_title">{$item['sku_title']|raw}</h1>
                <div class="sku_content">{$item['sku_content']|raw}</div>
            </div>
        </div>

    </div>

    <script>
        var $ = layui.jquery;

        // 加入购物车
        function add_cart() {
            var sku_out_no = $('input[name="out_no"]').val(),
                count = $('input[name="buycount"]').val();

            $.post('/product/add_cart', { sku_out_no, count }, function (res) {
                if (res.code == 401) {
                    return layer.open({
                        type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                        title: '登录',
                        shadeClose: true,
                        area: ['380px', '300px'],
                        content: '/account/login'
                    });
                } else if (res.code) return layer.msg(res.msg, { icon: 2 });
                layer.alert(res.msg, { icon: 1 });
            }, 'json');
        }

        // 修改sku
        function getSku(othis) {
            // 忽略当前选中项
            if (othis.classList.contains('layui-btn-danger')) return;
            $(othis).addClass('layui-btn-danger').removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary').removeClass('layui-btn-danger');
            var properties = [];
            $('.sku-properties button[class*="layui-btn-danger"]').each((i, item) => {
                properties.push({
                    name_id: item.dataset.nameId,
                    value_id: $(item).data('value-id'),
                });
            });
            $.post('/product/get_sku', { properties }, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                $('input[name="out_no"]').val(res.data.out_no);
                $('input[name="sku_title"]').val(res.data.sku_title);
                $('input[name="price"]').val(res.data.price);
                $('.layui-row .sku_title').html(res.data.sku_title);
                $('.layui-row .sku_content').html(res.data.sku_content);
                // 商品已下架
                if (res.data.status) {
                    $('.add_cart').addClass("layui-btn-disabled").attr("disabled", true);
                } else {
                    $('.add_cart').removeClass("layui-btn-disabled").attr("disabled", false);
                }
                // 动态改变地址
                history.pushState('', '', '/product/detail.html?out_no=' + res.data.out_no);
            }, 'json');

        }

        // 结算
        function dobuy() {
            window.location.href = '/carts/index';
        }
    </script>
</body>

</html>